<template>
  <grid-layout class="popup-grid-resource" :layout="layout">
    <template #left>
      <a-tree-select
        v-model="selectedCode"
        :show-search="false"
        :allow-clear="false"
        :tree-data="treeList"
        :field-names="{ label: 'text', children: 'nodes' }"
        :dropdown-style="{ maxHeight: '588px', overflow: 'auto' }"
        dropdownClassName="area-selector-tree-dropdown"
        style="width: 100%"
      />
    </template>
    <template #right>
      <div style="width: 100%; height: 100%" class="flex flex-column">
        <antd-form :options="formOptions" @confirm="filterFormData = $event" class="flex-fixed" />
        <common-table
          :api="getGridResourceDataAsync"
          :api-params="gridResourceDataParams"
          :columns="columns"
          class="flex-auto-height"
        >
          <template #index="{ text, scope, index }">
            <span>{{ index + 1 }}</span>
          </template>
          <template #typeName="{ text, scope }">
            <span v-if="scope.type_code === 'zz_01_07' && scope.manager_level === 3">网格长</span>
            <span v-else>{{ text }}</span>
          </template>
          <template #action="{ text, scope }">
            <span style="color: #3f8eee; cursor: pointer" @click="details(scope)">详情</span>
          </template>
        </common-table>
      </div>
    </template>
  </grid-layout>
</template>

<script>
import CommonTable from '@gis/lib/components/antd-table/index.vue';
import enums, {getEnumText} from '@gis/lib/enums/index.js';
import AntdForm from '@gis/lib/components/antd-form/index.js';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import { gridTeamList } from '@gis/lib/api';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
export default {
  name: 'popup-grid-resource',
  components: { GridLayout, AntdForm, CommonTable },
  props: {
    typeCode: { type: String, default: undefined },
    managerLevel: { type: Number },
    show: { type: Boolean, default: true },
  },
  data() {
    return {
      selectedCode: '',
      filterFormData: {},
      typeList: [],
      treeList: [],
      layout: [
        { name: 'left', colSpan: 6 },
        { name: 'right', colSpan: 18, style: { paddingBottom: 0 } },
      ],
      form: {
        type_code: { value: this.typeCode, show: this.show },
        name: '',
      },
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (v) => getEnumText('gender', v),
        },
        {
          title: '电话',
          dataIndex: 'phone',
        },
        {
          title: '所在单位',
          dataIndex: 'unit_name_concat',
        },
        {
          title: '类型',
          dataIndex: 'type_name',
          scopedSlots: { customRender: 'typeName' },
        },
        // {
        //   title: "操作",
        //   scopedSlots: { customRender: "action" },
        //   width: 80,
        //   align: "center",
        // },
      ],
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    formOptions() {
      return [
        {
          component: 'a-select',
          label: '人员类型',
          field: 'type_code',
          value: this.typeCode,
          props: {
            options: this.typeList,
          },
        },
        {
          component: 'a-input',
          label: '姓名',
          field: 'name',
        },
      ];
    },
    basicParams() {
      return {
        type_code: this.typeCode,
        area_code: this.selectedCode || this.areaCode,
        manager_level: this.managerLevel,
        status: 1,
      };
    },
    gridResourceDataParams() {
      return Object.assign({}, this.basicParams, this.filterFormData);
    },
  },
  created() {
    this.getTypeListAsync();
  },
  methods: {
    async getTypeListAsync() {
      const res = await this.$axios.get('/xw-microservice/xw-command-dispatch/v3/zz/type/list', {
        params: { type: 1 },
      });
      if (res.code === 200) {
        const data = res.data || [];
        const newData = data.filter((item) => item.type === 1);
        this.typeList = newData.map((item) => {
          return Object.assign({}, { label: item.name, value: item.code });
        });
      } else {
        console.log('请求类型列表失败：' + res.msg);
      }
    },
    async getGridResourceDataAsync(params) {
      if (!params || !params.area_code) return;
      return this.handleTableResult(await gridTeamList(params));
    },
    details() {},
  },
};
</script>

<style scoped lang="less">
.popup-grid-resource {
}
</style>
